<template>
  <div class="main">
    <div class="nav"><NavMenu @showtableDate="changeTableData"/></div>
    <div class="users">
      <Users :tableData="tableData" @changeRow="changeRow"  @removeRow="removeItem"/>
    </div>
    <router-view />
  </div>
</template>
<script>
import NavMenu from "./user/NavMenu.vue";
import Users from "./user/Users.vue";
export default {
  name: "Main",
  components: { NavMenu, Users },
  data() {
    return {
      e: { id: 101},
      tableData: [],
      allTableData: [
        {
          date: "2016-05-02",
          name: "王小美",
          address: "上海市普陀区金沙江路 1518 弄",
          id: "101",
          phone: "18846728532",
          perId: "001",
        },
        {
          date: "2016-05-04",
          name: "小虎",
          address: "北京市朝阳区幸福里小区10号楼3单元201",
          id: "102",
          phone: "18846728532",
          perId: "002",
        },
        {
          date: "2016-05-01",
          name: "小易",
          address: "上海市普陀区金沙江路 1519 弄",
          id: "103",
          phone: "18846728532",
          perId: "003",
        },
        {
          date: "2016-05-03",
          name: "小花",
          address: "上海市普陀区金沙江路 1516 弄",
          id: "201",
          phone: "18846728532",
          perId: "004",
        },
        {
          date: "2016-05-03",
          name: "小白",
          address: "上海市普陀区金沙江路 1516 弄",
          id: "202",
          phone: "18846728532",
          perId: "005",
        },
        {
          date: "2016-05-03",
          name: "小吕",
          address: "上海市普陀区金沙江路 1516 弄",
          id: "203",
          phone: "18846728532",
          perId: "006",
        },
        {
          date: "2016-05-03",
          name: "小光",
          address: "上海市普陀区金沙江路 1516 弄",
          id: "101",
          phone: "18846728532",
          perId: "007",
        },
        {
          date: "2016-05-03",
          name: "小雅",
          address: "上海市普陀区金沙江路 1516 弄",
          id: "102",
          phone: "18846728532",
          perId: "008",
        },
        {
          date: "2016-05-03",
          name: "小花",
          address: "上海市普陀区金沙江路 1516 弄",
          id: "103",
          phone: "18846728532",
          perId: "009",
        },
        {
          date: "2016-05-03",
          name: "小朵",
          address: "上海市普陀区金沙江路 1516 弄",
          id: "201",
          phone: "18846728532",
          perId: "010",
        },
        {
          date: "2016-05-03",
          name: "小布",
          address: "上海市普陀区金沙江路 1516 弄",
          id: "202",
          phone: "18846728532",
          perId: "011",
        },
        {
          date: "2016-05-03",
          name: "小丁",
          address: "上海市普陀区金沙江路 1516 弄",
          id: "201",
          phone: "18846728532",
          perId: "012",
        },
        {
          date: "2016-05-03",
          name: "小梓",
          address: "上海市普陀区金沙江路 1516 弄",
          id: "101",
          phone: "18846728532",
          perId: "013",
        },
        {
          date: "2016-05-03",
          name: "小梦",
          address: "上海市普陀区金沙江路 1516 弄",
          id: "101",
          phone: "18846728532",
          perId: "014",
        },
        {
          date: "2016-05-03",
          name: "阿波",
          address: "上海市普陀区金沙江路 1516 弄",
          id: "103",
          phone: "18846728532",
          perId: "015",
        },
        {
          date: "2016-05-03",
          name: "阿志",
          address: "上海市普陀区金沙江路 1516 弄",
          id: "102",
          phone: "18846728532",
          perId: "016",
        },
        {
          date: "2016-05-03",
          name: "阿伊",
          address: "上海市普陀区金沙江路 1516 弄",
          id: "202",
          phone: "18846728532",
          perId: "017",
        },
        {
          date: "2016-05-03",
          name: "阿坤",
          address: "上海市普陀区金沙江路 1516 弄",
          id: "201",
          phone: "18846728532",
          perId: "018",
        },
      ],
    };
  },
  methods: {
    changeTableData(e) {
      let newArrar = this.allTableData.filter((item) => {
        if (item.id === e.id) {
          return item;
        }
      });
      this.tableData = newArrar;
      this.e = e;
    },
    changeRow(row) {
      let arry = this.allTableData;
      arry = arry.filter((item) => item.perId != row.perId);
      arry.push(row);
      this.allTableData = arry;
      let e = this.e;
      this.changeTableData(e);
    },
    removeItem(row) {
        let arry = this.allTableData;
      arry = arry.filter((item) => item.perId !== row.perId);
      this.allTableData = arry;
      let e = this.e;
      this.changeTableData(e);
    }
  }
};
</script>
<style scoped>
.main {
  height: 100vh;
  display: flex;
}
.nav {
  width: 15%;
  height: 100vh;
}
.users {
  width: 66%;
  margin: 0 auto;
}
</style>
